<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(./images/bg.jpg) center top;
        }
        
        ul {
            list-style: none;
            width: 1089px;
            height: 429px;
            padding: 0;
        }
        
        .wink {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1089px;
            height: 429px;
            margin-top: -214px;
            margin-left: -494px;
            padding: 0;
            /* background: url(./images/1.jpg); */
        }
        
        ul li {
            float: left;
            height: 100%;
        }
        
        ul li:nth-child(1) {
            background: url(./images/1.jpg);
        }
        
        ul li:nth-child(2) {
            background: url(./images/2.jpg);
        }
        
        ul li:nth-child(3) {
            background: url(./images/3.jpg);
        }
        
        ul li:nth-child(4) {
            width: 789px;
            background: url(./images/4.jpg);
        }
        
        div {
            width: 16px;
            height: 100%;
            color: #fff;
            padding: 0 42px;
            background-color: rgba(0, 0, 0, .3);
            cursor: pointer;
        }
        
        p {
            padding: 50px 0;
            width: 26px;
            height: 50px;
            user-select: none;
        }
    </style>

</head>

<body>
    <div class="wink">
        <ul>
            <li>
                <div>
                    <p>我的个人拉萨之旅｜｜故事之城</p>
                </div>
            </li>
            <li>
                <div>
                    <p>我的个人拉萨之旅｜｜故事之城</p>
                </div>
            </li>
            <li>
                <div>
                    <p>我的个人拉萨之旅｜｜故事之城</p>
                </div>
            </li>
            <li>
                <div>
                    <p>我的个人拉萨之旅｜｜故事之城</p>
                </div>
            </li>

        </ul>

    </div>
    <script src="js/animate.js"></script>
    <script>
        var lis = document.querySelectorAll('li');
        var divs = document.querySelectorAll('.wink div');


        for (var j = 0; j < divs.length; j++) {

            divs[j].addEventListener('click', function() {
                for (var i = 0; i < lis.length; i++) {
                    animate(lis[i], {
                        width: 100
                    })
                }

                animate(this.parentElement, {
                    width: 789
                })
            })

        }
    </script>


</body>

</html>